{{extend "charts_layout.html"}}

{{block menu}}
{{menu('charts')}}
{{end}}

{{block sub_menu}}
{{sub_menu(menu_items, 'resource', 'sys','sum_sys_date')}}
{{end}}

{{block content_tool}}
<form action="">
起始日期：<input class="datepicker" type="text" name="begin_date" size="10" value="{{=begin_date}}"></input>
结束日期：<input class="datepicker" type="text" name="end_date" size="10" value="{{=end_date}}"></input>
<input type="submit" value="查询"></input>
</form>

<script>
$(function() {
        $('input.datepicker').datepicker({ dateFormat: 'yy-mm-dd' });
    });
</script>

{{end}}

{{block content_main}}
{{use "jquery"}}
{{use "jqpagination"}}
{{use "jsquery"}}
{{use "fgbutton"}}

<script>
	var loaded = false;
    $(function() {
		$( "#tabs" ).tabs({
            select: function(event, ui) {
				if (ui.panel.id == 'tabs-2'){
                    var query_string = "/charts/resource/sys/date/graph?" +'begin_date='+$('input[name=begin_date]').val()+'&'+'end_date='+$('input[name=end_date]').val();
                    myChart.setXMLUrl(query_string);
					myChart.render("chartContainer");
                    FusionCharts("myChartId").configureLink ({
                    swfUrl : "/static/FusionCharts/Charts/Column3D.swf",
                    renderAt : "linkedchart-container",
                    overlayButton: {show : false }
                    })
					loaded = true;
                    
				}
                return true;
            }
        });
	});
</script>

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">数据</a></li>
		<li><a href="#tabs-2">图表</a></li>
	</ul>
	<div id="tabs-1">
        <script type="text/javascript">
          $(function(){
              var width = $(window).width() - 300;
              $('#content_main').width(width);
          });
        </script>        
        <div id="content_main" class="box" style="overflow-x:auto;padding-bottom:20px;">        
        {{embed table}}
        </div>
        <div id="pagination" class="right"></div>
        <div class="left">共有：<font color="red">{{=info['total']}}</font> 条记录</div>
        <div class="left">&nbsp;<a id="download" href="#"><img src="{{=url_for_static('images/csv.png')}}" title="下载"/></a></div>        
        <div class="clear"></div>
        <script type="text/javascript">
        $(function(){
            var query_string = $.query.set('download', '').toString();
            $('#download').click(function(){
                window.location = query_string;
                return false;
            });
        });
        </script>
        
	</div>
	<div id="tabs-2">
        {{link "FusionCharts/Charts/FusionCharts.js"}}
        <table>
            <tr>
                <td><div id="chartContainer" align="center">FusionCharts will load here!</div></td>
            </tr>
            <tr>
                <td><div id="linkedchart-container" ><em>LinkedCharts</em> will load here</div></td>
            </tr>
        </table>
        <script type="text/javascript">
        <!--         
        
             var myChart = new FusionCharts( "/static/FusionCharts/Charts/Column3D.swf", 
              "myChartId", "1000", "300", "0", "1" );

//              myChart.setXMLUrl("/charts/data1");
//              myChart.render("chartContainer");
             
            // -->     
        
        </script>
	</div>
</div>


{{end}}
